<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Object.defineProperty</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    function change(id) {
      arc.temperature = id.value
    }
    function query() {
      setTimeout(() => {
        arc.temperature = 'async data'
      }, 1000);
    }
  </script>
</head>
<body>
  <input id="input" type="text" value="1" oninput="change(this)">
  <hr />
  <div id='div' style="min-width:180px; height: 21px;"></div>
  <button onclick="query()">asyncQuery</button>
  <script>
    let obj1 = {}
    Object.defineProperty(obj1, 'key', {
      enumerable: true, // 是否可枚举
      value: 'test', // 属性值
      writable: true, // 是否可重写
      configurable: true, // 属性是否可以被删除
    })
    console.log(obj1)
    for(let i in obj1) {
      console.log(i)
    }
    obj1.key = 'test111'
    console.log(obj1);
    // delete obj1.key
    console.log(obj1);
    
    
  </script>
  <script>
    console.log('---------------');
    let obj2 = {}
    Object.defineProperty(obj1, 'key', {
      get: function () {
        console.log('val')
        return key
      },
      set: function(val) {
        console.log('set', val)
      }
    })
    obj2.key = 'test2'
    obj2.key
    console.log(obj2.key)

  </script>
  <script>
    console.log('---------------');
    function Archiver() {
        var temperature = null;
        var archive = [];

        Object.defineProperty(this, 'temperature', {
          get: function (val) {
            console.log('get!', val);
            return temperature;
          },
          set: function (value) {
            document.getElementById('div').innerHTML = value
            document.getElementById('input').value = value
            temperature = value;
            archive.push({ val: temperature });
          }
        });

        this.getArchive = function () { return archive; };
        this.add = function (val) {
          console.log('testtttt');
          
            // let test = document.getElementById('a').innerHTML
          arc.temperature = 111
        };
      }

      var arc = new Archiver();
      console.log(arc);
      arc.temperature = 'test';
      console.log(arc.temperature); // 'get!'
      arc.temperature = 11;
      arc.temperature = 13;
      console.log(arc.getArchive()); // [{ val: 11 }, { val: 13 }]
  </script>
</body>
</html>